import React, { Component } from 'react';
import { Table, Space, Button, Breadcrumb, Divider, Form, Input, Modal, Pagination, DatePicker, message, Popconfirm } from 'antd';
import { AppstoreTwoTone, PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons'
import styles from './index.less'
import CreateForm from './createSpecialTopic'
import { connect } from 'dva'

// const { Option } = Select;
const { RangePicker } = DatePicker
@connect((global) => ({
  userInfo: global.userInfo,
}))
class SpecialTopicForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 0,
      currentPage: 0,
      pageSize: 5,
      total: 0,
      form: {
        startTime: "",
        endTime: "",
        name: "",
      },
      rangeTimeValue: "",
      isModalVisible: false,
      data: [],//表格数据
      topicDetail: {}//编辑时专题详情
    }
  }
  componentDidMount() {
    this.getTopicList()
  }
  searchTopicList = () => {
    this.setState({
      currentPage: 1
    }, () => {
      this.getTopicList()
    })
  }
  //查询
  getTopicList = () => {
    console.log(this.state.form)
    let { currentPage, pageSize, form } = this.state
    this.props.dispatch({
      type: "global/getTopicByPage",
      payload: {
        pageSize: pageSize,
        currentPage: currentPage === 0 ? 1 : currentPage,
        name: form.name,
        startTime: form.startTime,
        endTime: form.endTime
      }
    }).then(res => {
      console.log(res)
      if (res) {
        res.data.rows.map((item) => {
          item.key = item.id
        })
        this.setState({ data: res.data.rows, total: res.data.total })
      }
    })
  }
  //删除
  handleDelete = (record) => {
    this.props.dispatch({
      type: "global/deleteTopic",
      payload: {
        id: record.id
      }
    }).then(res => {
      console.log(res)
      if (res.msg === "请求成功") {
        message.success("删除成功！")
        this.getTopicList()
      }
    })
  }
  //编辑
  handleEdite = (record) => {
    this.props.dispatch({
      type: "global/getTopicInfo",
      payload: {
        id: record.id
      }
    }).then(res => {
      // console.log(res)
      if (res) {
        this.setState({
          topicDetail: res.data,
          type: 1,
          isModalVisible: true
        })
      }
    })
  }
  //清空
  clearEvent = () => {
    this.setState({
      form: {
        name: "",
        startTime: "",
        endTime: "",
      },
      rangeTimeValue: new Date()//清空
    }, () => { this.getTopicList() })
  }
  //新增弹窗
  createEvent = () => {
    this.setState({
      isModalVisible: true,
      type: 0,
      topicDetail: {}
    })
    // console.log(this)
    // console.log(createform)
    // this.createform.getpage()///////
  }
  handleOk = () => {
    this.setState({
      isModalVisible: false
    })

  }
  handleCancel = () => {
    this.setState({
      isModalVisible: false
    })
  }

  //标准名称
  inputValueChange = (e) => {
    console.log(e.target.value)
    this.setState({
      form: {
        ...this.state.form,
        name: e.target.value
      },
      currentPage: 0
    }, () => { console.log(this.state.form) })
  }
  //发布时间选择
  handleRangeOnChange = (dates, dateStrings) => {
    // console.log(dates,dateStrings)
    this.setState({
      form: {
        ...this.state.form,
        startTime: dateStrings[0],
        endTime: dateStrings[1]
      },
      currentPage: 0
    })
  }

  //分页
  pageChange = (page, pageSize) => {
    console.log(page, pageSize)
    this.setState({ pageSize: pageSize, currentPage: page }, () => { this.getTopicList() })
  }
  //
  pageSizeChange = (current, size) => {
    // console.log(size)
    this.setState({ pageSize: size, currentPage: 1 }, () => { this.getTopicList() })
  }


  render() {
    let { form, isModalVisible, type, rangeTimeValue, data, total, topicDetail, currentPage } = this.state;

    //表头数据
    const columns = [
      {
        title: '专题编号',
        dataIndex: 'num',
        align: "center",
        key: 'num',
        width: 100
      },
      {
        title: '专题名称',
        dataIndex: 'name',
        align: "center",
        key: 'name',
      },
      {
        title: '专题访问量',
        dataIndex: 'visitNum',
        align: "center",
        key: 'visitNum',
        width: 200
      },
      {
        title: '关键字',
        dataIndex: 'tags',
        align: "center",
        key: 'tags',
        width: 200
      },

      {
        title: '发布时间',
        key: 'releaseTime',
        align: "center",
        dataIndex: 'releaseTime',
        width: 200
      },

      {
        title: '操作',
        key: 'action',
        align: "center",
        width: 400,
        render: (text, record, index) => (
          <Space size="middle">
            <Button type="primary"
              icon={<FormOutlined />}
              size="small" shape="round"
              style={{ background: "#11bf94" }}
              onClick={() => this.handleEdite(record)}>编辑</Button>
            <Popconfirm title="是否确实删除?" onConfirm={() => this.handleDelete(record)}>
              <Button type="primary"
                icon={<DeleteOutlined />}
                danger
                size="small"
                shape="round"
                // onClick={() => this.handleDelete(record)}
                >删除</Button>
            </Popconfirm>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <div className={styles.pagetop}>
          <span className={styles.pageheader}>
            <Breadcrumb>
              <Breadcrumb.Item><AppstoreTwoTone />专题</Breadcrumb.Item>
              <Breadcrumb.Item>
                <a href="/specialtopic">专题列表</a>
              </Breadcrumb.Item>
            </Breadcrumb>
          </span>
        </div>
        <div style={{ background: "white" }}>
          <div className={styles.form}>
            <Form
              layout="inline"
              initialValues={form}
            >
              <Form.Item
                label="专题名称"
              >
                <Input placeholder="请输入专题名称" value={form.name} onChange={this.inputValueChange} />
              </Form.Item>
              <Form.Item
                label="发布时间"
              >
                <RangePicker
                  key={rangeTimeValue}
                  showTime
                  format="YYYY/MM/DD HH:mm:ss"
                  onChange={this.handleRangeOnChange}
                />
              </Form.Item>

              <Form.Item>
                <Button type="primary" onClick={this.searchTopicList}>查询</Button>
                <Button type="default" style={{ marginLeft: "10px" }} onClick={this.clearEvent}>清空</Button>
              </Form.Item>
            </Form>
          </div>
          <Divider />
          <Button type="primary" icon={<PlusOutlined />} style={{ marginLeft: "20px" }} onClick={this.createEvent}>新增</Button>
          <Table
            columns={columns}
            dataSource={data}
            pagination={false}
          />
        </div>
        <div className={styles.pagination}>
          <Pagination
            total={total}
            showSizeChanger
            showQuickJumper
            current={currentPage === 0 ? 1 : currentPage}
            defaultCurrent={1}
            defaultPageSize={5}
            pageSizeOptions={[5, 10, 20, 50]}
            showTotal={total => `共 ${total} 条`}
            onChange={this.pageChange}
            onShowSizeChange={this.pageSizeChange}
          />
        </div>
        <Modal
          title={type === 0 ? "专题创建" : "专题编辑"}
          centered
          // closable={ false }
          onCancel={this.handleCancel}
          okText="保存"
          width={1000}
          visible={isModalVisible}
          footer={false}

        >
          <CreateForm
            // ref=""
            topicDetail={topicDetail}
            type={type}
            key={new Date()}
            getTopicList={this.getTopicList}
            handleCancel={this.handleCancel}
            handleOk={this.handleOk} />
        </Modal>
      </div>
    );
  }
}

export default SpecialTopicForm;